<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssreset/reset-min.css"/>
		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/vader/jquery-ui.css" />
		<style type="text/css">
			html, body {
				background-color: tan;
			}
			.hidden {
				display: none;
			}
			.element {
				display: block;
				float:left;
				height: 96px;
				width: 96px;
				border: 1px solid #000;
				background-color: blue;
			}
			
			.ui-draggable-dragging {
				z-index: 1000;
			}
			#scenes {
				clear: left;
			}
			
			.scene {
				display: block;
				height: 100px;
				width: 300px;
				border: 1px solid red;
				background-color: grey;
			}
			
			.ui-effects-transfer {
				border: 1px dotted red;
				background-color: tan;
				opacity: .5;
			}
			
		</style>
		<script type="text/javascript">
			var sb = {
				init: function(){
					console.log("sb init")
					sb.populateElements();
					sb.buildTabs();
					sb.populateStorylines();
				},
				populateElements: function(){
					var elementList = $(".elements");
						elementList
							.html("");
					for(i=0; i< 10; i++){
						elementList
							.append($("<li class='element'><div>Element #"+i+"</div></li>").data("info",{id:i}))
							.end()
					}
					$(".element").draggable({ 
						opacity: 0.7, 
						helper: 'clone' 
					});
				},
				buildTabs:function(){
					$("#scenes").tabs();
				},
				populateStorylines: function(){
					var storyline = $(".storyline");
					storyline
						.html("");
					for(i=0; i<4; i++){
						storyline.append($("<li><div class='scene'>Scene <div class='hero' id='hero_"+i+"'>[hero] <p>*</p></div> number "+i+" </div></li>"))
					}
					
					$(".hero").droppable({
						drop: function(event, ui){
							var me = $(this);
							$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
							console.log(ui.draggable.data("info").id)
							
							
      						//$(this).effect("transfer", { to: $("div").eq(i) }, 1000);
							
							ui.draggable.hide("transfer", {
								to: me.eq(0),
								className: 'ui-effects-transfer'
							},1000, function(){
								$(this).hide();
							})
							/**
							 
								ui.draggable							 
								.hide("scale",{ percent: 0}, 500, function(){
									//console.log($(this));
								})**/
								/**
								.hide("transfer", { to: me, className: 'ui-effects-transfer' },500,function(){
									//callback when done.
									
								});**/
								


								
								
						}
					}
					);	
				}
			}
			
			$(document).ready(function(){
				sb.init();
				
				$('#date').datepicker();
			});
			
			
		</script>
	</head>
	<body>
		<div id="sagabuilder">
			<div class="panels">
				<div class="panel">
					<ul class="elements">
						<li>Hero</li>
					</ul>
					
					<div id="scenes">
						<ul>
							<li><a href="#tabs-1">Storyline</a></li>
							<li><a href="#tabs-2">Scenes</a></li>
						</ul>
						<div id="tabs-1">
							<ul class="storyline">
								<li>intro</li>
							</ul>
						</div>	
						<div id="tabs-2">
							scenes
						</div>
					</div>
					
					<input type="text" name="date" id="date" class="hidden"/>
					
					
				</div>
			</div>
		</div>
	</body>
</html>
